<template>
  <div class="car_manage">
    <!--标题B-->
    <div class="pagetitle">
      <div class="pageText">
        <span>车辆管理</span>
      </div>
    </div>
    <!--标题E-->

    <div class="secondaryTitle">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="statusStr" @change="sec" clearable placeholder="黑白名单">
            <el-option label="白名单" value="white"></el-option>
            <el-option label="黑名单" value="black"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="groupNameStr" @change="sec" clearable placeholder="分组">
            <el-option
              v-for="(item,index) in nList"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="5">
          <el-input placeholder="请输入车牌号" style="width: 4rem;" v-model="input" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="sec"></el-button>
          </el-input>
        </el-col>

        <el-col :span="13" style="text-align: right">
          <span class="greenf" @click="addcar">添加车辆</span>
        </el-col>
      </el-row>
    </div>
    <table style="width:calc(100% - .8rem);margin: 0 .4rem">
      <thead>
      <th>车牌号</th>
      <th>车主姓名</th>
      <th>手机号码</th>
      <th>车辆类型</th>
      <th>车辆颜色</th>
      <th>黑白名单</th>
      <th>分组</th>
      <th>操作</th>
      </thead>
      <tbody>
      <tr v-for="item in carList">
        <td>{{item.plateNo}}</td>
        <td>{{item.ownerName}}</td>
        <td>{{item.phone}}</td>
        <td>{{item.vehicleType}}</td>
        <td>{{item.vehicleColor}}</td>
        <td>{{hbmd(item.status)}}</td>
        <td>{{item.groupName}}</td>

        <td>
           <span style="font-size: .16rem;margin-right: .2rem;cursor: pointer"
                 class="el-icon-edit-outline" @click="caredit(item)"></span>
          <span style="font-size: .16rem;cursor: pointer" class="el-icon-delete"
                @click="delcar(item)"></span>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="pagingbox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="9"
        :pager-count="13"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>
    </div>
    <!--编辑框-->
    <div class="masklayer" v-show="iscar">
      <div class="editbox">
        <div class="editboxTitle">
          <span>{{cartext}}</span>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="车牌号码" prop="number">
            <el-input v-model="ruleForm.number" placeholder="请输入车牌号码"></el-input>
          </el-form-item>
          <el-form-item label="车主姓名">
            <el-input v-model="ruleForm.name" placeholder="请输入车主姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型">
            <el-select v-model="ruleForm.cartype" placeholder="请选择车辆类型" style="width: 100%">
              <el-option label="小型车" value="小型车"></el-option>
              <el-option label="大型车" value="大型车"></el-option>
              <el-option label="摩托车" value="摩托车"></el-option>
              <el-option label="其他车" value="其他车"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆颜色">
            <el-select v-model="ruleForm.carcolor" placeholder="请选择车辆颜色" style="width: 100%">
              <el-option label="白色" value="白色"></el-option>
              <el-option label="银色" value="银色"></el-option>
              <el-option label="灰色" value="灰色"></el-option>
              <el-option label="黑色" value="黑色"></el-option>
              <el-option label="红色" value="红色"></el-option>
              <el-option label="深蓝色" value="深蓝色"></el-option>
              <el-option label="蓝色" value="蓝色"></el-option>
              <el-option label="黄色" value="黄色"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="黑白名单">
            <el-select v-model="ruleForm.statusStr" placeholder="请选择黑白名单" style="width: 100%">
              <el-option label="白名单" value="white"></el-option>
              <el-option label="黑名单" value="black"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分组">
            <el-autocomplete
              style="width: 100%"
              class="inline-input"
              v-model="ruleForm.groupName"
              :fetch-suggestions="querySearch"
              placeholder="请选择分组"
            ></el-autocomplete>
          </el-form-item>
        </el-form>
        <div class="bottombtn">
          <span class="cancelf" @click="resetForm('ruleForm')" style="margin-right: .2rem;">取消</span>
          <span class="greenf" @click="submitForm('ruleForm')">确定</span>
        </div>
      </div>
    </div>
    <!--编辑框-->

  </div>
</template>
<script>
  import http from '../../utils/http'
  import api from '../../utils/api'

  export default {
    data() {
      return {
        input: "",
        cartext: "添加车辆",
        iscar: false,
        ruleForm: {
          number: '',
          name: '',
          phone: '',
          time: "",
          reason: "",
          cartype: "",
          carcolor: "",
          mark: '',
          groupName: "",
          statusStr: ""
        },
        rules: {
          number: [
            {required: true, message: '请输入车牌号', trigger: 'blur'}
          ],
          time: [
            {type: 'date', required: true, message: '请选择结束日期', trigger: 'change'}
          ],
          reason: [
            {required: true, message: '请选择布控原因', trigger: 'change'}
          ],
        },
        status: 1,
        areaId: "",
        statusStr: "",
        groupNameStr: "",
        pageNum: 0,
        carList: [],
        totalElements: 10,
        currentPage: 1,
        compileId: "",
        nList: [],
        restaurants: []
      }
    },
    mounted() {
    },
    created() {
      this.areaId = sessionStorage.getItem('areaId');
      this.loginId = sessionStorage.getItem('loginId');
      this.getNameList();
      this.gateCar();
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      hbmd(t) {
        if (t == 'black') {
          return '黑名单'
        } else if (t == 'white') {
          return '白名单'
        } else {
          return '陌生名单'
        }
      },
      getNameList() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.car.nameList, {
            areaId: vm.areaId,
            modelType: 'car',
            name: ""
          })
          if (res.data.code == '200') {
            vm.nList = res.data.data;
            let arr = [];
            res.data.data.forEach(e => {
              let z = {
                value: e
              }
              arr.push(z)
            })

            vm.restaurants = arr;
          }
        })()
      },
      sec() {
        this.currentPage = 1;
        this.pageNum = 0;
        this.gateCar();
      },
      gateCar() {
        let then = this;
        (async function () {
          let res = await http.post(api.car.gateCar, {
            "pageSize": 9,
            "pageNum": then.pageNum,
            "areaId": then.areaId,
            "statusStr": then.statusStr,
            "groupNameStr": then.groupNameStr,
            "keywords": then.input
          })
          if (res.data.code == '200') {
            then.carList = res.data.data.content;
            then.totalElements = res.data.data.totalElements;
          } else {
            then.warn("网络异常，请联系后台管理员")
          }
        })()
      },
      openlist(t) {
        if (t == 0) {
          this.status = 1;
          this.statusStr = 'white';
        }
        if (t == 1) {
          this.status = 2;
          this.statusStr = 'black';
        }
        this.currentPage = 1;
        this.pageNum = 0;
        this.gateCar();
      },
      delcar(t) {
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let then = this;
          (async function () {
            let res = await http.delete(api.car.delCar + '?id=' + t.id)
            if (res.data.code == '200') {
              then.$message({
                type: 'success',
                message: '删除成功!'
              });
              then.gateCar();
            } else {
              then.warn(res.data.message)
            }
          })()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      caredit(t) {
        this.cartext = '修改车辆';
        this.iscar = true;
        this.compileId = t.id;
        let obj = Object.assign({}, t);
        this.ruleForm.number = obj.plateNo;
        this.ruleForm.phone = obj.phone;
        this.ruleForm.name = obj.ownerName;
        this.ruleForm.cartype = obj.vehicleType;
        this.ruleForm.carcolor = obj.vehicleColor;
        this.ruleForm.statusStr = obj.status;
        this.ruleForm.groupName = obj.groupName;
      },
      addcar() {
        this.cartext = '添加车辆';
        this.iscar = true;
      },
      submitForm(formName) {
        if (this.cartext == '修改车辆') {
          let then = this, formdata = {
            loginId: this.loginId,
            id: this.compileId,
            status: this.ruleForm.statusStr,
            groupName: this.ruleForm.groupName,
            plateNo: this.ruleForm.number,
            phone: this.ruleForm.phone,
            ownerName: this.ruleForm.name,
            vehicleType: this.ruleForm.cartype,
            vehicleColor: this.ruleForm.carcolor
          };
          (async function () {
            let res = await http.post(api.car.updateCar, formdata)
            if (res.data.code == '200') {
              then.success('修改成功')
              then.$refs[formName].resetFields();
              for (let k in  then.ruleForm) {
                then.ruleForm[k] = ''
              }
              then.gateCar();
              then.iscar = false;
            } else {
              then.warn(res.data.message)
            }
          })()

        }
        if (this.cartext == '添加车辆') {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let then = this, fordata = {
                "loginId": this.loginId,
                "status": this.ruleForm.statusStr,
                "groupName": this.ruleForm.groupName,
                "plateNo": this.ruleForm.number,
                "phone": this.ruleForm.phone,
                "ownerName": this.ruleForm.name,
                "vehicleType": this.ruleForm.cartype,
                "vehicleColor": this.ruleForm.carcolor
              };
              (async function () {
                let res = await http.post(api.car.addCar, fordata)
                if (res.data.code == '200') {
                  then.success('添加成功')
                  then.$refs[formName].resetFields();
                  for (let k in  then.ruleForm) {
                    then.ruleForm[k] = ''
                  }
                  then.gateCar();
                  then.iscar = false;
                } else {
                  then.warn(res.data.message)
                }
              })()
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }
        this.getNameList();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        for (let k in  this.ruleForm) {
          this.ruleForm[k] = ''
        }
        this.iscar = false
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageNum = val - 1;
        this.gateCar();
      },
      success(text) {
        this.$message({
          showClose: true,
          message: text,
          type: 'success',
        });
      },
      warn(text) {
        this.$message({
          showClose: true,
          message: text,
          type: 'warning'
        });
      },
    }
  }
</script>
<style scoped>
  @import "../../../static/css/car_manage.css";
</style>
<style>
  .secondaryTitle .el-input__inner {
    height: .4rem !important;
    line-height: .4rem !important;
  }
</style>
